<template>
	<view class="fl-s-s">
		<image src="/static/images/home/Maskgroup@2x.png" class="common_bg" mode="aspectFill"></image>
		<view class="status_bar m-b-30"></view>
		<view class="w-1 fl-s-s relative">
			<!-- 头像部分 -->
			<view class="w-1 fr-b-c p-r-30">
				<view class="fr-s-c" @click="toLogin">
					<image :src="user_info.avatar || '/static/images/user/bj_def_head.png'" class="circle"
						style="width: 108rpx; height: 108rpx;" mode="aspectFill"></image>
					<view class="m-l-20 flex-1" v-if="user_info">
						<view class="head_top" @tap="go_ImproveInformation">
							{{user_info.nickname || user_info.username}} <u-icon name="arrow-right" class="arrow-right"></u-icon>
						</view>
						<view class="head_bottom">
							<view class="text-sm" @tap="$wanlshop.auth('/pages/user/signin/signin')">
								<view class="cu-tag sm radius bg-orange">
									Lv {{ user_info.level }}
								</view>
								<view class="cu-tag sm radius bg-orange">
									用户积分 {{ user_info.score }}
								</view>
							</view>
						</view>
					</view>
					<view class="m-l-20 flex-1" v-else>
						<view class="head_top" @tap="go_ImproveInformation">
							请登录 <u-icon name="arrow-right" class="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card_item">
					<view class="card_item_top">
						{{user_info.score}}
					</view>
					<view class="card_item_bottom">
						我的积分
					</view>
				</view>
				<view class="card_item">
					<view class="card_item_top">
						{{dynamic.coupon}}
					</view>
					<view class="card_item_bottom">
						优惠券
					</view>
				</view>
				<view class="card_item">
					<view class="card_item_top">
						{{user_info.invoice}}
					</view>
					<view class="card_item_bottom">
						发票余额
					</view>
				</view>
				<view class="card_item" >
					<view class="card_item_top" v-if="user_info">
						{{user_info.money}}
					</view>
					<view class="card_item_bottom" @tap="EventMoney">
						账户余额 <u-icon name="arrow-right" class="arrow-right1"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="fr-b-c m-t-40 w-1 relative p-r-30 order_icon" style="z-index: 3;">
				<view class="fl-c" @tap="$wanlshop.auth('/pages/UserCenter/MyOrders/MyOrders?state=1')">
					<view class="order_icon_item">
						<image src="/static/images/user/order_s1.png" class="order_icon_item_img"></image>
						<view class="order_icon_item_qipao" v-if="order_num.pay > 0">
							{{ order_num.pay }}
						</view>
					</view>
					<text style="color: #2B354C;font-size: 26rpx; margin-top: 15rpx;" class="fs-24 fm-ali">待付款</text>
				</view>
				<view class="fl-c" @tap="$wanlshop.auth('/pages/UserCenter/MyOrders/MyOrders?state=2')">
					<view class="order_icon_item">
						<image src="/static/images/user/order_s2.png" class="order_icon_item_img"></image>
						<view class="order_icon_item_qipao" v-if="order_num.delive > 0">
							{{ order_num.delive }}
						</view>
					</view>
					<text style="color: #2B354C;font-size: 26rpx; margin-top: 15rpx;" class="fs-24 fm-ali">待发货</text>
				</view>
				<view class="fl-c" @tap="$wanlshop.auth('/pages/UserCenter/MyOrders/MyOrders?state=3')">
					<view class="order_icon_item">
						<image src="/static/images/user/order_s3.png" class="order_icon_item_img"></image>
						<view class="order_icon_item_qipao" v-if="order_num.receiving > 0">
							{{order_num.receiving}}
						</view>
					</view>
					<text style="color: #2B354C;font-size: 26rpx; margin-top: 15rpx;" class="fs-24 fm-ali">待收货</text>
				</view>
				<view class="fl-c" @tap="$wanlshop.auth('/pages/UserCenter/MyOrders/MyOrders?state=4')">
					<view class="order_icon_item">
						<image src="/static/images/user/order_s4.png" class="order_icon_item_img"></image>
						<view class="order_icon_item_qipao" v-if="order_num.evaluate > 0">
							{{ order_num.evaluate }}
						</view>
					</view>
					<text style="color: #2B354C;font-size: 26rpx; margin-top: 15rpx;" class="fs-24 fm-ali">待评价</text>
				</view>
				<view class="fl-c" @tap="$wanlshop.auth('/pages/UserCenter/MyOrders/AfterSalesOrder/AfterSalesOrder')">
					<view class="order_icon_item">
						<image src="/static/images/user/order_s5.png" class="order_icon_item_img"></image>
						<view class="order_icon_item_qipao" v-if="order_num.customer > 0">
							{{ order_num.customer}}
						</view>
					</view>
					<text style="color: #2B354C;font-size: 26rpx; margin-top: 15rpx;" class="fs-24 fm-ali">退款/售后</text>
				</view>
			</view>
			<view class="w-1 fl-s-s">
				<view class="w-1 fr-b-c user-list-item"  v-for="(item,index) in tabs" :key="index" @tap="go_page(index)">
					<text class="fs-32 fm-ali user-list-item-text" :style="{color: item == '人生终点折现'?'red':'#000'}">{{item}}</text>
					<u-icon name="arrow-right" class="arrow-right2" :style="{color: item == '人生终点折现'?'red':'#000'}"></u-icon>
				</view>
			</view>
		</view>
		<view class="page_btn" @tap="logout">
			退出登录
		</view>
		<u-popup bgColor="transparent" border-radius="32" v-model="show" mode="center">
			<view class="fl-s-c relative fm-ali"
				style="padding: 44rpx 0rpx 54rpx 0rpx; width: 624rpx; background: #FFFFFF; border-radius: 32rpx;">
				<text class="fs-32" style="color: #000000;">客服电话</text>
				<text class="c-33 m-t-40" style="font-size: 46rpx;">{{tel}}</text>
				<text class="c-99 fs-26">您可以拨打我们的客服电话解决您在体</text>
				<text class="c-99 fs-26">验中遇到的问题</text>
				<view class="fr-c call-btn" @click="callPhone">立即拨打</view>
				<text class="fs-32 m-t-50" style="color: #FA8B0A;" @click="show = false">取消</text>
			</view>
		</u-popup>
		<u-action-sheet :list="ruzhu_list" v-model="ruzhu_show" @click="ruzhu_click"></u-action-sheet>
		<u-action-sheet :list="xieyi_list" v-model="xieyi_show" @click="xieyi_click"></u-action-sheet>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				orderTabs: [{
					text: '待付款',
					img: '/static/images/user/order_s1.png'
				}, {
					text: '待发货',
					img: '/static/images/user/order_s2.png'
				}, {
					text: '待收货',
					img: '/static/images/user/order_s3.png'
				}, {
					text: '待评价',
					img: '/static/images/user/order_s4.png'
				}, {
					text: '退款/售后',
					img: '/static/images/user/order_s5.png'
				}, ],
				tabs: ['全部订单', '转介绍', '优惠券', '活动返现', '商户入驻', '上传发票', '收货地址','人生终点折现','隐私政策','注销账号'],
				show: false,
				tel: '', // 客服电话
				nickname: '',
				avatar: '',
				mobile: '',
				money: 0, // 余额
				score: 0, // 积分
				couponNum: 0,
				ruzhu_list:[
					{
						text: '商家入驻'	
					},
					{
						text: '线下引流'	
					},
				],
				xieyi_list:[
					{
						text: '使用协议'	
					},
					{
						text: '隐私政策'	
					},
				],
				xieyi_show:false,
				ruzhu_show:false,
				user_id:'',
				user_info:'',
				order_num:'',
				dynamic:'',
				isLive:null,
				ruzhu_type:null,
				verify:null
			}
		},
		onShow() {
			this.user_id = uni.getStorageSync('user_id')
			// let userinfo = uni.getStorageSync('wanlshop:user')
			// if(userinfo){
			// 	this.user_info = userinfo
			// }
			this.get_userinfo()
		},
		onLoad() {
			// this.getzhibo()
			this.getzhuru()
		},
		computed: {
			...mapState(['user', 'statistics','common'])
		},
		methods: {
			
			get_userinfo(){
				let t = this
				this.$api.post({
					url: '/wanlshop/user/refresh',
					success: res => {
						t.order_num = res.data.statistics.order
						t.dynamic = res.data.statistics.dynamic
						t.user_info = res.data.userinfo
					}
				});
			},
			
			logout(){
				this.$get({
					url: '/wanlshop/user/logout',
					data:{
						client_id:uni.getStorageSync("wanlshop:chat_client_id")?uni.getStorageSync("wanlshop:chat_client_id") : null
					}
				}).then(res => {
					console.log(res)
					this.$store.dispatch('user/logout');
					this.$wanlshop.msg('退出成功');
					this.user_info = ''
					this.order_num = ''
					this.dynamic = ''
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/Login/Login'
						})
					},1500)
					
				})
			},
			ruzhu_click(index){
				
				uni.navigateTo({
					url:'/pages/UserCenter/MerchantSettlement/MerchantSettlement?type='+index
				})
			},
			xieyi_click(index){
				console.log(index)
				let id = index+1
				uni.navigateTo({
					url:'/pages/UserCenter/Privacy/Privacy?id='+id
				})
			},
			go_ImproveInformation(){
				if(!uni.getStorageSync('wanlshop:user')){
					uni.reLaunch({
						url:'/pages/Login/Login'
					})
				}else{
					uni.navigateTo({
						url:'/pages/UserCenter/ImproveInformation/ImproveInformation'
					})
				}
				
			},
			getInfo(loading = true) {
				this.$get({
					url: '/Wxapps/doPageMymoneyD',
					loading
				}).then(res => {
					for (let i in res.data.userInfo) {
						uni.setStorageSync(i, res.data.userInfo[i])
					}
					uni.setStorageSync('money', res.data.data.money)
					uni.setStorageSync('score', res.data.data.score)
					uni.setStorageSync('couponNum', res.data.data.couponNum)
					this.nickname = uni.getStorageSync('nickname') || ''
					this.avatar = uni.getStorageSync('avatar') || ''
					this.mobile = uni.getStorageSync('mobile') || ''
					this.money = uni.getStorageSync('money') || 0
					this.score = uni.getStorageSync('score') || 0
					this.couponNum = uni.getStorageSync('couponNum') || 0
				})
			},
			EventMoney(){
				// uni.navigateTo({
				// 	url: '/pages/UserCenter/RecommendationCenter/Withdrawal/Withdrawal'
				// })
				uni.navigateTo({
					url:'/pages/UserCenter/RecommendationCenter/CommissionWithdrawal/CommissionWithdrawal?may_withdraw='+this.user_info.money +'&type=1'
				})
			},
			toSet() {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
					return
				}
				uni.navigateTo({
					url: '/pages/UserCenter/SetUp/SetUp'
				})
			},
			toCoupon() {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
					return
				}
				uni.navigateTo({
					url: '/pages/UserCenter/Coupon/Coupon'
				})
			},
			toCollect() {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
					return
				}
				uni.navigateTo({
					url: '/pages/UserCenter/Collection/Collection'
				})
			},
			toWithdrawl() {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
					return
				}
				uni.navigateTo({
					url: '/pages/UserCenter/RecommendationCenter/Withdrawal/Withdrawal'
				})
			},
			toOrder(n) {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
					return
				}
				if (n == 5) {
					uni.navigateTo({
						url: '/pages/UserCenter/MyOrders/AfterSalesOrder/AfterSalesOrder'
					})
				} else {
					uni.navigateTo({
						url: '/pages/UserCenter/MyOrders/MyOrders?n=' + n
					})
				}
			},
			toLogin() {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: '/pages/Login/Login'
					})
				}
			},
			callPhone() {
				this.show = false
				uni.makePhoneCall({
					phoneNumber: '13211111111', //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},
			getzhuru(){
				this.$get({
					url: '/wanlshop/shop/apply',
				}).then((res) => {
					console.log(res)
					if(res.code == 1){
						if(res.data){
							uni.setStorageSync('ruzhuinfo',res.data)
							this.ruzhu_type = res.data.type
							this.verify = res.data.verify
						}
					}
				});
			},
			zhuxiao(){
				this.$get({
					url: '/user/zx',
				}).then(res => {
					this.$store.dispatch('user/logout');
					this.$wanlshop.msg('注销成功');
					this.user_info = ''
					this.order_num = ''
					this.dynamic = ''
				})
			},
			go_page(index){
				let t = this
				if(index == 0){
					uni.navigateTo({
						url:'/pages/UserCenter/MyOrders/MyOrders'
					})
				}
				if(index == 1){
					uni.navigateTo({
						url:'/pages/UserCenter/invite/invite'
					})
				}
				if(index == 2){
					uni.navigateTo({
						url:'/pages/UserCenter/Coupon/Coupon'
					})
				}
				if(index == 3){
					uni.navigateTo({
						url:'/pages/UserCenter/EventMoney/EventMoney'
					})
				}
				if(index == 4){
					// this.ruzhu_show = true
					if(t.verify == 3 ){
						uni.showToast({
							title:'您已入驻',
							icon:'none'
						})
					}else if(t.verify == 4){
						if(t.ruzhu_type){
							let index1 = t.ruzhu_type
							uni.navigateTo({
								url:'/pages/UserCenter/MerchantSettlement/MerchantSettlement?type='+index1
							})
						}else{
							t.ruzhu_show = true
						}
					}else if(t.verify == 2){
						uni.navigateTo({
							url: '/pages/UserCenter/MerchantSettlement/SubSuccess/SubSuccess'
						});
					}else{
						t.ruzhu_show = true
					}
					
				}
				if(index == 5){
					uni.navigateTo({
						url:'/pages/UserCenter/UploadInvoice/UploadInvoice'
					})
				}
				if(index == 6){
					uni.navigateTo({
						url:'/pages/UserCenter/MyAddress/MyAddress'
					})
				}
				if(index == 7) {
					
					uni.navigateTo({
						url:'/pages/UserCenter/lifeEnd/lifeEnd'
					})
				}
				
				if(index == 8)t.xieyi_show = true
				if(index == 9){
					// console.log('注销账号')
					uni.showModal({
						title: '提示',
						content: '您确定注销账号吗，如果注销，您的余额或者其他重要信息将被清空',
						success: (res) => {
							if (res.confirm) {
								t.zhuxiao()
							}else{
								console.log('取消注销')
							}
						},
					})
				}
				// if(index == 9){
				// 	uni.navigateTo({
				// 		url:'/pages/Home/Active/list'
				// 	})
				// }
				
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
		/* padding-bottom: 90rpx; */
	}
	.card{
		width: 94%;
		height: 148rpx;
		background: linear-gradient(270deg, #E42E1D 0%, #E56C31 57%);
		margin: 0 auto;
		margin-top: 52rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* background-image: url('/static/images/user/Group3705@2x.png');
		background-repeat: no-repeat;
		background-size: 100% auto; */
	}
	.order_icon{
		padding: 0 32rpx;
		border-bottom: #F4F4F4 2rpx solid;
		padding-bottom: 40rpx;
	}
	.arrow-right2{
		color: #666666;
	}
	.arrow-right1{
		font-size: 20rpx;
	}
	.card_item_top{
		font-size: 44rpx;
		font-family: DIN Alternate-Bold, DIN Alternate;
		font-weight: bold;
	}
	.card_item_bottom{
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
	}
	.card_item{
		width: 30%;
		text-align: center;
		color: #fff;
	}
	.circle{
		border: #FCDBDA 4rpx solid;
	}
	.head_bottom{
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #666666;
		margin-top: 10rpx;
	}
	.head_top{
		font-size: 36rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #000000;
	}
	.arrow-right{
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	.user-list-item:last-child{
		border-bottom: 0rpx solid #F4F4F4;
	}
	.user-list-item {
		padding: 26rpx;
		border-bottom: 2rpx solid #F4F4F4;
	}

	@-webkit-keyframes rubberBand {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}

		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}

		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}

		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}

		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}

		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}

		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}

	@keyframes rubberBand {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}

		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}

		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}

		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}

		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}

		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}

		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}

	.rubberBand {
		-webkit-animation-name: rubberBand;
		animation-name: rubberBand;
	}

	.animated {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
	}


	.common_bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 340rpx;
	}

	.could-tx {
		height: 36rpx;
		background: linear-gradient(180deg, #F5DF69 0%, #E1C530 100%);
		border-radius: 20rpx;
		padding: 0 10rpx;
	}

	.tx-btn {
		width: 100rpx;
		height: 64rpx;
		background: linear-gradient(144deg, #FFDACB 0%, #FFF2EC 96%);
		box-shadow: 0rpx 0rpx 28rpx 2rpx #E34C20;
		border-radius: 18rpx;
		font-size: 26rpx;
		font-family: Alibaba;
		color: #FA360A;
	}

	.call-btn {
		width: 430rpx;
		height: 100rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		box-shadow: 0rpx 6rpx 32rpx 2rpx rgba(250, 74, 20, 0.58);
		border-radius: 50rpx;
		font-size: 32rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		margin-top: 58rpx;
	}
	.order_icon_item_img{
		width: 64rpx; 
		height: 64rpx;
	}
	.order_icon_item{
		width: 64rpx;
		height: 64rpx;
		position: relative;
	}
	.order_icon_item_qipao{
		width: 48rpx;
		height: 42rpx;
		position: absolute;
		top: -22rpx;
		right: -22rpx;
		background-color: #1EBB37;
		border-radius: 20rpx 20rpx  20rpx 0;
		text-align: center;
		line-height: 42rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #FFFFFF;
	}
	.user-list-item-text{
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi 2.0-75 SemiBold, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #333333;
	}
	.page_btn{
		width: 688rpx;
		height: 80rpx;
		margin: 0 auto;
		background: #F4F4F4;
		border-radius: 8rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #999999;
		text-align: center;
		line-height: 80rpx;
	}
</style>
